<template>
	<view class="bg" :style="{'background': custom?.bg_images?.bg_color}">
		<view class="activity-top">
			<image :src="custom?.bg_images?.main_top" mode=""></image>
		</view>
		<view class="activity-center pad-top-60 pad-left-right-30">
			<view class="text-center font-35 font-w-600">{{info.name}}</view>
			<view class="text-right mar-top-30 font-28">您当前总收益: {{overview?.account?.amount ?? 0}}元</view>

			<view class="bottomY centerXY mar-top-50">
				<template v-if="isjoin == 1">
					<!-- #ifdef MP-WEIXIN -->
					<button class="custom-button" open-type="share">
						<view class="button">立即邀请</view>
					</button>
					<!-- #endif -->
					<view @click="hanldeInvitLog" class="button mar-left-20">邀请记录</view>
				</template>
				<view v-else @click="hanldeActivityJoin" class="button mar-left-20">参加活动</view>
			</view>

			<view class="activity-text font-28 pad-30 mar-top-50">
				<view class="activity-title font-35 font-w-600">活动规则</view>
				<!-- 	<view>
					活动时间为: {{timeFormat(info.begin_at, 'yyyy-mm-dd')}}/{{timeFormat(info.end_at, 'yyyy-mm-dd')}}
				</view>
				<view>总奖池: {{custom.total_amount}}元,已发放: {{custom.give_amount}}</view>

				<view>邀请成功即可获得{{custom.min_amount}}元-{{custom.max_amount}}元的随机现金奖励</view>
				<view v-if="info.valid_share_from_activity_page == 1">仅在活动页面内进行分享有效</view>
				<view v-else>任何页面分享都有效</view> -->
				<text>{{info.rule_text}}</text>
			</view>

		</view>
		<view class="activity-bottom">
			<image :src="custom?.bg_images?.main_bottom" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { activityDetail, activityOverview, activityisJoined, activityJoin } from '@/api/index.js';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { timeFormat } from '@/node_modules/uview-plus';
	import util from '@/util/share.js';

	// 页面参数
	let props = ref({});
	onLoad((option) => {
		props.value = option;
		getActivityDetail(option.activity_id);
		if (uni.getStorageSync('jwt_token').token) {
			getActivityJoin(option.activity_id);
		}
	})

	// 分享
	onShareAppMessage(() => {
		return util.onShare({
			path: `/pages/activity/info/info?activity_id=${info.value.id}`,
			activityId: info.value.id
		})
	})

	// 分享朋友圈
	onShareTimeline(() => {
		let uid = "";
		if (uni.getStorageSync('userId')) {
			uid = uni.getStorageSync('userId');
		}
		let imageUrl = uni.getStorageSync('shareCover');

		return {
			query: `uid=${uid}&ref=wxmini_user_share&activity_id=${info.value.id}`,
			title: "心宇利家政",
			imageUrl: imageUrl
		}
	})

	// 获取是否参加活动
	const isjoin = ref(2)
	const getActivityJoin = (activityId) => {
		activityisJoined({
			activity_id: activityId
		}).then(res => {
			if (res.code == 200) {
				isjoin.value = res.data.joined;
			}
		})

		activityOverview({ activity_id: activityId }).then(res => {
			overview.value = res.data;
		});
	}

	const hanldeActivityJoin = () => {
		activityJoin({
			activity_id: props.value.activity_id
		}).then(res => {
			if (res?.code == 200) {
				uni.$u.toast('参加成功');
				isjoin.value = 1;
			}
		})
	}

	// 活动数据
	const info = ref({});
	const custom = ref({});
	const overview = ref({});
	const getActivityDetail = async (activityId) => {
		// 获取详情
		let { data } = await activityDetail({ activity_id: activityId })
		info.value = data.info;
		custom.value = data.custom_data;
	}

	const hanldeInvitLog = () => {
		uni.navigateTo({
			url: '/pages/activity/invite-log/invite-log?activity_id=' + props.value.activity_id
		})
	}
</script>

<style scoped>
	.custom-button {
		width: 260rpx;
		background: white;
		border-radius: 50rpx;
		/* 取消背景 */
		border: none;
		/* 取消边框 */
		color: inherit;
		/* 继承父元素的文字颜色 */
		font-size: 16px;
		/* 自定义字体大小 */
		padding: 0;
		/* 取消内边距 */
		box-shadow: none;
		text-align: initial;
		outline: none;
		margin: 0;
		/* position: static; */
		line-height: normal;
	}

	.bg {
		background: #eebc79;
		min-height: 100vh;
	}

	.activity-top {
		width: 100%;
	}

	.activity-top>image {
		width: 100%;
		height: 400rpx;
		display: block;
	}

	.activity-text {
		border: 1rpx solid black;
		position: relative;
	}

	.activity-title {
		width: 200rpx;
		position: absolute;
		text-align: center;
		left: 50%;
		transform: translate(-50%, -100%);
		background: #eebc79;
	}

	.activity-bottom>image {
		display: block;
		width: 100%;
		height: 300rpx;
		position: fixed;
		bottom: 0rpx;
	}

	.activity-center {
		padding-bottom: 300rpx;
	}

	.button {
		width: 200rpx;
		background: white;
		text-align: center;
		font-size: 26rpx;
		padding: 20rpx 30rpx;
		border-radius: 50rpx;
	}
</style>